<template>
    <div className="grade-charts">
        <h2>成绩统计图表</h2>
        <div id="chart-container"></div>
    </div>
</template>

<script setup>
import {onMounted} from 'vue';
import * as echarts from 'echarts';

const yearCount = 7;
const categoryCount = 30;
const xAxisData = [];
const customData = [];
const legendData = [];
const dataList = [];
const encodeY = [];

// 初始化数据
for (let i = 0; i < yearCount; i++) {
    legendData.push(2010 + i + '');
    dataList.push([]);
    encodeY.push(1 + i);
}

for (let i = 0; i < categoryCount; i++) {
    const val = Math.random() * 1000;
    xAxisData.push('category' + i);
    const customVal = [i];
    customData.push(customVal);
    for (let j = 0; j < dataList.length; j++) {
        const value =
            j === 0
                ? echarts.number.round(val, 2)
                : echarts.number.round(
                    Math.max(0, dataList[j - 1][i] + (Math.random() - 0.5) * 200),
                    2
                );
        dataList[j].push(value);
        customVal.push(value);
    }
}

let myChart;

onMounted(() => {
    // 初始化图表
    const chartDom = document.getElementById('chart-container');
    myChart = echarts.init(chartDom);

    // 设置图表配置项
    const option = {
        tooltip: {trigger: 'axis'},
        legend: {data: legendData},
        dataZoom: [
            {type: 'slider', start: 50, end: 70},
            {type: 'inside', start: 50, end: 70}
        ],
        xAxis: {data: xAxisData},
        yAxis: {},
        series: [
            {
                type: 'custom',
                name: 'trend',
                renderItem: function (params, api) {
                    const xValue = api.value(0);
                    const currentSeriesIndices = api.currentSeriesIndices();
                    const barLayout = api.barLayout({
                        barGap: '30%',
                        barCategoryGap: '20%',
                        count: currentSeriesIndices.length - 1
                    });
                    const points = [];
                    for (let i = 0; i < currentSeriesIndices.length; i++) {
                        const seriesIndex = currentSeriesIndices[i];
                        if (seriesIndex !== params.seriesIndex) {
                            const point = api.coord([xValue, api.value(seriesIndex)]);
                            point[0] += barLayout[i - 1].offsetCenter;
                            point[1] -= 20;
                            points.push(point);
                        }
                    }
                    const style = api.style({
                        stroke: api.visual('color'),
                        fill: 'none'
                    });
                    return {
                        type: 'polyline',
                        shape: {points: points},
                        style: style
                    };
                },
                itemStyle: {borderWidth: 2},
                encode: {x: 0, y: encodeY},
                data: customData,
                z: 100
            },
            ...dataList.map((data, index) => ({
                type: 'bar',
                animation: false,
                name: legendData[index + 1],
                itemStyle: {opacity: 0.5},
                data: data
            }))
        ]
    };

    // 设置图表配置项并渲染
    myChart.setOption(option);

    // 定时更新数据
    setInterval(() => {
        for (let i = 0; i < yearCount; i++) {
            for (let j = 0; j < categoryCount; j++) {
                const value = Math.random() * 1000;
                dataList[i][j] = value;
                customData[i][j + 1] = value;
            }
        }
        myChart.setOption({
            series: [
                {
                    type: 'custom',
                    data: customData
                },
                ...dataList.map((data, index) => ({
                    type: 'bar',
                    data: data
                }))
            ]
        });
    }, 2000);
});
</script>

<style scoped>
.grade-charts {
    text-align: center;
}

#chart-container {
    height: 400px;
}
</style>
